@import "base.less";
@import "reset.less";
@import "el-datepicker.less";

html, body {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 12px;
  font-family: "webfont", "PingFang SC", "Microsoft YaHei", Source Han Sans CN, Hiragino Sans GB, microsoft yahei, arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 99.99%;
  overflow: hidden;
  color: #333;
}

html {
  min-width: 1400px;
  overflow-x: auto;
}

::-webkit-scrollbar { /*滚动条整体样式*/
  position: absolute;
  width: 3px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 3px;
}

::-webkit-scrollbar-thumb {
  .round(10px);
  .boxshadow(inset 0 0 5px rgba(0, 0, 0, 0.2));
  background: rgba(0, 0, 0, .4);
}

::-webkit-scrollbar-track { /*滚动条里面轨道*/
  .boxshadow(inset 0 0 5px rgba(0, 0, 0, 0.2));
  background: @font-btn;
}

.text-red {
  color: @color-red;
}

.btn-open {
  color: @color-btn-open !important;
}

.align-right {
  text-align: right;
}

.pdt-no {
  padding-bottom: 0 !important;
}

#crm {
  height: 100%;
  overflow: hidden;
  position: relative;
  min-width: 1400px;
  z-index: 1;

  &.widgetFolded {
    #widget-menu {
      width: 60px;
      overflow: visible;

      .menu-content {
        overflow: hidden;
        overflow: visible;
      }

      .widget-logo {
        background-image: none;

        &:before {
          display: block;
        }
      }

      .root-menu {
        .root-child {
          overflow: visible;
          .tran(all .2s ease);

          .root-link {
            line-height: 50px;
            height: 60px;
            padding: 5px 10px;

            span {
              display: none;
            }

            .root-icon {
              margin-right: 0;
              font-size: 30px;
              width: 40px;
              text-align: center;
            }

            .icon-arrow-down {
              display: none;
            }
          }

          &:hover {
            background-color: @color-light-blue;

            ol {
              visibility: visible;
              opacity: 1;
              .transform(translateY(0));
              .tran(all .4s ease .2s);
            }
          }

          ol {
            .absolute(59px, 0, auto, auto, 200px, auto, 20);
            display: block;
            margin: 0;
            background-color: #fff;
            border: 1px solid #ddd;
            .boxshadow(0 5px 20px rgba(0, 0, 0, .1));
            visibility: hidden;
            opacity: 0;
            .transform(translateY(20px));
            .round(10px);
            padding: 15px 0;

            &:before, &:after {
              content: "";
              display: inline-block;
              .absolute(-14px, 23px, auto, auto, 0, 0, 1);
              .box-sizing(content-box);
              border: 7px solid transparent;
              border-right-color: #fff;
            }

            &:before {
              z-index: 0;
              margin-left: -1px;
              border-right-color: #ddd;
            }

            li {
              a {
                padding-left: 34px;

                &:before {
                  .absolute(20px, 50%, auto, auto, 4px, 4px, 1);
                }

                &.router-link-active {
                  color: @color-blue;

                  span {
                    font-size: 16px;
                  }

                  &:before {
                    background-color: @color-blue;
                    height: 16px;
                    margin-top: -8px;
                  }
                }

                &:hover {
                  background-color: @color-light-blue;
                }
              }
            }
          }
        }
      }
    }

    #app-main {
      left: 60px;
    }
  }
}

.crm-main {
  height: 100%;
  background-color: #f0f2f5;
}

#header-bar {
  .absolute(0, 0, 0, auto, auto, 60px, 5);
  background-color: #fff;
  .boxshadow(0 2px 10px rgba(0, 0, 0, .08));
  .tran(all .2s ease);
  .box-sizing(border-box);
  padding-left: 240px;

  .header-logo {
    display: block;
    .absolute(0, 0, auto, 0, 240px, auto, 1);
    .background-attr(center center, auto 90%, no-repeat);
    .background-image('logo.png');
    background-color: #fff;

    &:before {
      content: "";
      display: none;
      .absolute(50%, 5px, auto, 5px, 50px, auto, 1);
      margin-left: -28px;
      .background-attr(4px -10px, auto 62px, no-repeat);
      .background-image('logo.png');
    }
  }

  .header-left {
    height: 100%;

    h1 {
      display: inline-block;
      vertical-align: top;
      position: relative;
      height: 100%;
      .box-sizing(border-box);
      padding: 15px 30px;
      line-height: 30px;
      font-size: 18px;

      &:before {
        content: "";
        display: block;
        .absolute(0, 10%, auto, 10%, 1px, auto, 1);
        background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0) 100%);
        background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0) 100%);
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#00000000',GradientType=0);
        opacity: .2;
      }

      user-select: none;

      img {
        display: inline-block;
        vertical-align: top;
        height: 30px;
        margin-top: 0;
      }
    }
  }

  .header-right {
    .absolute(auto, 0, 0, 0, auto, auto, 5);

    .header-menu {
      display: inline-block;
      vertical-align: top;
      height: 100%;
      font-size: 0;

      .header-menu-item {
        display: inline-block;
        vertical-align: top;
        position: relative;
        height: 100%;
        .box-sizing(border-box);

        & + .header-menu-item {
          padding-left: 1px;

          &:before {
            content: "";
            .absolute(0, 0, auto, 0, 1px, auto, 1);
            background-color: #f2f2f2;
          }
        }

        .hover-menu {
          background-color: rgba(255, 255, 255, 0);
          .absolute(50%, 58px, auto, auto, 140px, auto, 5);
          margin-left: -70px;
          opacity: 0;
          .transform(translateY(50%));
          visibility: hidden;
          .tran(none);
          padding-top: 12px;
        }

        ol {
          display: block;
          white-space: nowrap;
          background-color: #fff;
          position: relative;
          .round(8px);
          .box-sizing(border-box);
          .boxshadow(0 5px 20px rgba(0, 0, 0, .1));
          border: 1px solid #ededed;
          padding: 5px 0;

          &:before, &:after {
            content: "";
            display: inline-block;
            .box-sizing(content-box);
            .absolute(50%, -12px, auto, auto, 0, 0, 2);
            margin-left: -6px;
            border: 6px solid transparent;
            border-bottom-color: #fff;
          }

          &:after {
            z-index: 1;
            border-bottom-color: #ededed;
            top: -14px;
            border-width: 7px;
            margin-left: -7px;
          }

          li {
            a {
              display: block;
              .normal-link();
              padding: 3px 20px;

              i, em {
                display: inline-block;
                vertical-align: top;
                line-height: 30px;
                font-size: 14px;
              }

              .iconfont {
                font-size: 20px;
                margin-right: 8px;
              }

              &:hover {
                background-color: @color-light-blue;
              }
            }
          }
        }

        &:hover {
          .hover-menu {
            .tran(all .3s ease);
            visibility: visible;
            opacity: 1;
            .transform(translateY(0));
          }
        }
      }

      .i-link {
        display: inline-block;
        vertical-align: top;
        .normal-link();
        white-space: nowrap;
        .box-sizing(border-box);
        height: 100%;
        padding: 12px 20px;
        cursor: pointer;
        .tran(all .2s ease);

        em, span, i {
          display: inline-block;
          line-height: 36px;
          vertical-align: top;
          font-size: 14px;
        }

        .iconfont {
          font-size: 20px;
          margin-right: 5px;
        }

        &:hover {
          background-color: rgba(0, 0, 0, .05);
        }
      }

      .i-clock {
        display: inline-block;
        vertical-align: top;
        line-height: 20px;
        margin-top: 10px;
        text-align: right;
        padding-right: 20px;

        p {
          font-family: Arial;
          color: #666;

          span, strong {
            display: inline-block;
            font-size: 14px;
            vertical-align: top;
          }

          span + span {
            margin-left: 5px;
          }
        }
      }

      .i-user {
        em {
          color: #fff;
          background-color: @color-blue;
          width: 36px;
          height: 36px;
          overflow: hidden;
          line-height: 36px;
          text-align: center;
          .round(50px);
          font-size: 16px;
          margin-right: 5px;
          position: relative;

          &:before {
            content: "";
            display: block;
            .background-attr(center center, contain, no-repeat);
            .background-image('ajax-loading.svg');
            .absolute(-1px, -1px, -1px, -1px, auto, auto, 10);
            opacity: 0;
            visibility: hidden;
            .tran(all .2s ease);
          }

          &.ajax-loading {
            &:before {
              visibility: visible;
              opacity: .8;
            }
          }
        }

        .iconfont {
          font-size: 14px;
          margin-left: 2px;
        }
      }

      .i-logout {
        .iconfont {
          font-size: 20px;
          margin-right: 5px;
        }
      }
    }
  }
}

#app-main {
  .absolute(0, 60px, 0, 0, auto, auto, 3);
  overflow: hidden;
  .box-sizing(border-box);
  overflow-y: auto;
  .tran(all .2s ease);

  .app-main-container {
    .box-sizing(border-box);
    padding: 20px;
    min-height: 100%;
    overflow: hidden;
    position: relative;
    z-index: 1;
    padding-bottom: 80px;

    &:after {
      display: block;
      text-align: center;
      content: "Copyright © 2000-2021 hc360.com. All Rights Reserved";
      line-height: 40px;
      font-size: 13px;
      color: #999;
      .absolute(0, auto, 0, 0, auto, auto, -1);
      padding: 15px 20px;
    }
  }
}

#widget-menu {
  .absolute(0, 60px, auto, 0, 240px, auto, 4);
  background-color: #fff;
  .boxshadow(0 10px 10px rgba(0, 0, 0, .08));
  .tran(all .2s ease);
  .box-sizing(border-box);
  border-top: 1px solid #ededed;

  .toggle-fold {
    display: inline-block;
    font-size: 0;
    .normal-link();
    .absolute(50%, -10px, auto, auto, auto, auto, 10);
    margin-left: -30px;
    text-align: center;
    background-color: @color-blue;
    white-space: nowrap;
    width: 60px;
    height: 30px;
    color: @color-light-blue;
    .round(5px);
    .boxshadow(0 0 5px rgba(0, 0, 0, .1));

    i, em {
      display: inline-block;
      vertical-align: top;
      font-size: 12px;
      line-height: 38px;
    }

    .iconfont {
      vertical-align: top;
      font-size: 12px;
      margin-right: 3px;
      text-align: center;
    }

    .tran(all .2s ease);
    .transform(translateY(-100%));
    opacity: 0;
    visibility: hidden;
  }

  &:hover {
    .toggle-fold {
      visibility: visible;
      opacity: 1;
      .transform(translateY(0));
    }
  }

  .root-menu {
    display: block;
    margin: 25px auto;

    .root-child {
      display: block;
      position: relative;
      overflow: hidden;
      .box-sizing(border-box);
      padding: 0;
      color: #333;

      .root-link {
        color: #333;
        display: block;
        line-height: 30px;
        .normal-link();
        .box-sizing(border-box);
        font-size: 0;
        white-space: nowrap;
        overflow: hidden;
        position: relative;
        padding: 5px 15px;

        i, span {
          display: inline-block;
          vertical-align: top;
          font-size: 15px;
          text-shadow: 0 0 10px rgba(0, 0, 0, .1);
        }

        .root-icon {
          margin-right: 5px;
          font-size: 20px;
        }

        .icon-arrow-down {
          .absolute(auto, 50%, 15px, auto, 16px, 16px, 1);
          margin-top: -8px;
          line-height: 16px;
          .tran(all .2s ease);
        }

        &.router-link-active {
          background-color: #e3f2fd;
          color: #0d6efd;
        }
      }

      ol {
        display: block;
        margin: 10px auto;
        margin-left: 25px;

        li {
          display: block;

          & + li {
            margin-top: 2px;
          }

          a {
            display: block;
            .normal-link();
            position: relative;
            z-index: 1;
            font-size: 0;
            white-space: nowrap;
            overflow: hidden;
            line-height: 34px;
            color: #555;
            padding-left: 14px;

            &:before {
              content: "";
              display: inline-block;
              .absolute(0, 50%, auto, auto, 4px, 4px, 1);
              overflow: hidden;
              margin-top: -2px;
              .round(5px);
              background-color: rgba(0, 0, 0, .2);
              .tran(all .2s ease);
            }

            span {
              display: inline-block;
              vertical-align: top;
              font-size: 14px;
              .tran(all .2s ease);
            }

            &.router-link-active {
              color: #0d6efd;

              span {
                font-size: 16px;
              }

              &:before {
                background-color: #0d6efd;
                height: 16px;
                margin-top: -8px;
              }
            }
          }
        }
      }

      & + .root-child {
        margin-top: 10px;
      }
    }
  }

  .menu-content {
    .absolute(0, 0, 0, 0, auto, auto, 5);
    overflow: hidden;
    overflow-y: auto;

    &::-webkit-scrollbar { /*滚动条整体样式*/
      position: absolute;
      width: 3px; /*高宽分别对应横竖滚动条的尺寸*/
      height: 3px;
    }

    &::-webkit-scrollbar-thumb {
      .round(10px);
      .boxshadow(none);
      background: rgba(0, 0, 0, .3);
    }

    &::-webkit-scrollbar-track { /*滚动条里面轨道*/
      .boxshadow(none);
      background: transparent;
    }
  }

  & + #app-main {
    left: 240px;
  }
}

.app-container {
  background-color: #fff;
  position: relative;
  .round(6px);
  padding: 20px;
  .boxshadow(0 0 15px rgba(0, 0, 0, .05));

  & + .app-container {
    margin-top: 25px;
  }

  .data-header {
    position: relative;
    min-height: 44px;
  }

  .app-container-head {
    position: relative;
    padding: 10px 20px;
    .box-sizing(content-box);
    min-height: 30px;
    border-bottom: 1px solid #eee;
    margin: -20px;
    margin-bottom: 0;
    z-index: 10;

    .ach-title {
      display: inline-block;
      white-space: nowrap;
      .absolute(20px, 50%, auto, auto, auto, auto, 1);
      margin-top: -15px;
      line-height: 30px;
      font-size: 18px;
      padding-left: 15px;
      font-weight: bolder;

      &:before {
        content: "";
        display: block;
        .absolute(0, 25%, auto, 25%, 4px, auto, 1);
        background-color: @color-blue;
        .round(5px);
      }
    }

    .ach-tabs {
      white-space: nowrap;
      margin: -10px 0;
      background-color: #fff;

      ul {
        display: inline-block;
        vertical-align: top;

        li {
          display: inline-block;
          vertical-align: top;

          a {
            display: inline-block;
            vertical-align: top;
            padding: 0 10px;
            .normal-link();
            font-size: 14px;
            position: relative;

            &:before {
              content: "";
              display: block;
              .absolute(3%, auto, 3%, -2px, auto, 3px, 1);
              background-color: transparent;
              .tran(all .2s ease);
              .round(5px);
            }

            i, span {
              display: inline-block;
              vertical-align: top;
              line-height: 50px;
              font-size: 15px;
            }

            .iconfont {
              font-size: 24px;
              margin-right: 5px;
            }

            &:hover {
              opacity: .7;
            }

            &.current {
              color: @color-blue;

              &:before {
                background-color: @color-blue;
              }
            }
          }

          & + li {
            margin-left: 20px;
          }
        }
      }
    }
  }
}

.bread-crumbs-bar {
  overflow: hidden;
  position: relative;
  z-index: 0;
  font-size: 0;
  padding-bottom: 10px;

  ul {
    display: inline-block;
    vertical-align: top;
    overflow: hidden;
    white-space: nowrap;
    padding: 0;
    padding-bottom: 10px;

    li {
      display: inline-block;
      vertical-align: top;
      position: relative;

      a, span {
        display: inline-block;
        vertical-align: top;
        font-size: 13px;
        line-height: 16px;
        color: #333;
        opacity: .5;
        .tran(all .2s ease);
      }

      a:hover {
        opacity: .8;
        color: #34a0a4;
      }

      span {
        opacity: 1;
      }

      & + li {
        margin-left: 12px;
        padding-left: 12px;

        &:before {
          content: "";
          display: inline-block;
          .absolute(0, 50%, auto, auto, 1px, 14px, 1);
          margin-top: -7px;
          background-color: rgba(0, 0, 0, .2);
          .transform(rotate(25deg));
        }
      }
    }
  }
}

.el-form--inline {
  .el-form-item {
    margin-bottom: 10px;
    margin-right: 5px;
    vertical-align: top;

    .el-form-item__label {
      padding-right: 0;
    }

    .el-form-item__content {
      line-height: 34px;

      .btn-blue-o {
        & + .btn-blue-o {
          margin-left: 5px;
        }
      }

      .el-input--small {
        .el-input__inner {
          height: 34px;
          line-height: 34px;
          vertical-align: top;
        }

        .el-textarea__inner {
          min-height: 34px !important;
          line-height: 34px;
        }
      }

      .el-cascader {
        display: inline-block;
        vertical-align: top;
      }
    }
  }

  .el-selectinput-group {
    display: inline-block;
    vertical-align: top;
    position: relative;
    z-index: 1;
    font-size: 0;
    white-space: nowrap;

    .el-select, .el-input, .el-selectinput-label {
      vertical-align: top;
    }

    .el-selectinput-label {
      display: inline-block;
      line-height: 34px;
      font-size: 14px;
      padding-left: 2rem;
      color: #606266;
    }

    [class*=" el-icon-"], [class^=el-icon-] {
      vertical-align: top;
    }

    .esg-right-icon {
      display: inline-block;
      .absolute(auto, 50%, 8px, auto, 20px, 20px, 5);
      margin-top: -10px;
      line-height: 20px;
      text-align: center;
      color: #999;
    }

    .el-select {
      .el-input {
        .el-input__inner {
          background-color: #f0f2f5;
          .round(4px 0 0 4px);
        }

        &.is-focus {
          position: relative;
          z-index: 2;
        }
      }

      margin-right: -1px;

      & + .el-input {
        .el-input__inner {
          .round(0 4px 4px 0);

          &:focus {
            position: relative;
            z-index: 2;
          }
        }
      }
    }

    .el-date-editor--datetimerange {
      &.el-input__inner {
        width: 340px;
        height: 34px;

        .el-range__icon {
          line-height: 26px;
          font-size: 16px;
        }

        padding-right: 0;

        .el-range-separator {
          line-height: 28px;
        }
      }
    }

  }
}

.el-table {
  .el-table__header {
    thead {
      tr, th {
        background-color: #f8fafe;
      }
      th {
        padding: 12px 0;
        font-size: 13px;
        white-space: nowrap;
        color: #5c677d;
        .cell {
          padding-left: 15px;
          padding-right: 15px;
        }
      }

      th.el-table__cell {
        padding: 10px 0;
        font-size: 13px;
      }

      .caret-wrapper {
        margin-top: -6px;
        margin-bottom: -6px;
      }

      .el-table__column-filter-trigger {
        margin-top: -6px;
        margin-bottom: -6px;

        *[class^="el-icon"] {
          font-size: 15px;
          font-weight: bolder;
        }
      }
    }

    .el-table__cell {
      white-space: nowrap;

      .cell {
        white-space: nowrap;
        color: #5c677d;
        padding-left: 15px;
        padding-right: 15px;
      }
    }
  }

  .cell, .el-table__cell:first-child .cell {
    padding-left: 15px;
    padding-right: 15px;
  }

  .el-table__fixed, .el-table__fixed-right {
    height: 100% !important;
    .boxshadow(0 -15px 10px rgba(0, 0, 0, .15));
  }

  .el-table__body {
    font-size: 12px;

    tbody {
      .el-table__cell {
        padding: 0;
      }
    }
  }

  &.el-table--border {
    .el-table__body {
      tbody {
        .el-table__cell {
          padding-top: 10px;
          padding-bottom: 10px;
        }
      }
    }
  }

}

.el-table-btngroup {
  white-space: nowrap;
  position: relative;
  z-index: 1;
  text-align: center;
  font-size: 0;
  padding: 5px 10px;
  padding-top: 8px;
  margin: -10px 0;

  .el-table-btn {
    display: inline-block;
    vertical-align: top;
    .clear-style();
    .button-variant(@color-red-flat, transparent, transparent);
    cursor: pointer;
    .tran(all .2s ease);
    text-align: center;
    min-width: 44px;
    position: relative;

    &[disabled], &.disabled {
      opacity: .4;
      z-index: -1;
    }

    &:hover {
      opacity: .7;
    }

    i, em {
      display: inline-block;
      vertical-align: top;
      line-height: 18px;
      font-size: 12px;
    }

    .iconfont {
      font-size: 22px;
      line-height: 24px;
      display: block;
    }
  }
}

.scope-icontext-group {
  vertical-align: top;
  white-space: nowrap;

  em, i, span, a {
    display: inline-block;
    vertical-align: top;
    line-height: 23px;
  }

  .text-icon {
    line-height: 17px;
    height: 19px;
    margin-top: 2px;
    margin-left: 3px;
  }

  .iconfont {
    line-height: 23px;
    margin-left: 3px;
    color: @color-blue;
    font-size: 18px;
  }

  .label {
    line-height: 16px;
    position: relative;
    top: 2px;
    margin-left: 5px;
  }

  a {
    .normal-link();
    .tran(all .2s ease);

    &:hover {
      opacity: .6;
    }
  }
}

.text-icon {
  display: inline-block;
  vertical-align: top;
  padding: 0 8px;
  .box-sizing(border-box);
  border: 1px solid transparent;
  .round(4px);

  &.text-kp {
    background-color: #fdeeef;
    border-color: #e63946;
    color: #e63946;
  }
}

.el-table--scrollable-x .el-table__body-wrapper {
  &::-webkit-scrollbar { /*滚动条整体样式*/
    position: fixed;
    width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 8px;
    .round(10px);
  }

  &::-webkit-scrollbar-thumb {
    .round(10px);
    .boxshadow(none);
    background: #d6e2e9;

    &:hover {
      background: #99c1de;
    }
  }

  &::-webkit-scrollbar-track { /*滚动条里面轨道*/
    .boxshadow(none);
    background: transparent;
  }
}

.el-input--small {
  .el-input__prefix {
    left: 0;
    width: 30px;
    text-align: center;

    .iconfont {
      line-height: 32px;
      text-align: center;
      font-size: 16px;
    }
  }
}

.el-drawer {
  .el-drawer__header {
    padding: 10px 20px;
    font-size: 18px;
    line-height: 30px;
    color: #333;
    margin-bottom: 0;
    font-weight: bolder;

    .el-drawer__close-btn {
      padding: 0;
      font-size: 26px;
      color: @color-blue;

      &:hover {
        opacity: .6;
      }
    }
  }

  &.rtl {
    .round(12px 0 0 12px);
  }
}

.el-date-picker {
  width: 240px;

  .el-time-panel {
    width: 119px;
  }

  .el-date-picker__time-header {
    .el-input {
      .el-input__inner {
        text-align: center;
        cursor: pointer;
        line-height: 28px;
        height: 28px;
      }
    }
  }

  .el-picker-panel__content {
    margin: 10px;
    width: 220px;

    .el-date-table {
      td {
        width: 30px;
        padding: 1px 0;
      }
    }
  }

  .el-picker-panel__footer {
    margin-top: -8px;
  }
}

.el-textarea {
  .el-textarea__inner {
    resize: none;
  }
}

.v-modal {
  opacity: .7;
}

.el-dialog {
  .absolute(50%, 50%, auto, auto, 50%, auto, 100);
  margin-top: 0 !important;
  .transform(translate(-50%, -55%));
  max-height: 90%;
  overflow-y: auto;
  .round(12px);
  .boxshadow(0 0 50px rgba(255, 255, 255, .1));

  .el-dialog__header {
    .el-dialog__title {
      font-weight: bolder;
    }

    .el-dialog__headerbtn {
      top: 15px;
      right: 15px;
      line-height: 30px;

      .el-dialog__close {
        font-size: 30px;
        line-height: 30px;
        .tran(all .3s ease-out);
      }

      &:hover {
        .el-dialog__close {
          .transform(rotate(180deg));
        }
      }
    }
  }

  .el-dialog__body {
    padding-top: 10px;
    padding-bottom: 20px;

    .dialog-form-table {
      margin: 0;
      border-collapse: collapse;
      table-layout: fixed;

      .el-alert {
        line-height: 1;
        text-align: center;
      }

      tbody {
        th {
          line-height: 34px;
          white-space: nowrap;
          overflow: hidden;
        }

        td, th {
          vertical-align: top;
          padding: 8px;
        }
      }

      .el-radio-group, .el-checkbox-group {
        vertical-align: top;
      }

      .el-radio, .el-checkbox {
        vertical-align: top;
        line-height: 20px;
        padding-top: 7px;
        padding-bottom: 7px;
      }

      .el-radio__inner, .el-checkbox__inner {
        position: relative;
        top: 2px;
      }

      .el-radio__input, .el-radio__label, .el-checkbox__input, .el-checkbox__label {
        vertical-align: top;
        line-height: 20px;
      }
    }

    sup {
      color: @color-red-flat;
      display: inline-block;
      vertical-align: top;
      position: relative;
      right: 5px;
    }
  }

  .el-dialog__footer {
    border-top: 1px solid #ededed;
    padding-top: 20px;

    .dialog-footer {
      button {
        margin-left: 10px;
        padding: 0 20px;
      }
    }
  }
}

.el-input--small {
  .el-input__inner {
    line-height: 32px;
    height: 34px;
  }

  .el-textarea__inner {
    line-height: 22px;
  }
}

.el-form {
  position: relative;

  .el-right {
    .absolute(auto, 0, 0, auto, auto, auto, 1);
  }
}

.description-table {
  border-collapse: collapse;
  border: 1px solid #EBEEF5;
  width: 100%;

  tbody {
    tr {
      .tran(all .2s ease);

      & + tr {
        border-top: 1px solid #EBEEF5;
      }

      &:hover {
        background-color: lighten(#EBEEF5, 3%);
      }
    }

    th + td, td + td, td + th {
      border-left: 1px solid #EBEEF5;
    }

    th, td {
      line-height: 24px;
      padding: 12px 15px;
      vertical-align: top;
      font-size: 14px;
    }

    th {
      white-space: nowrap;
      overflow: hidden;
      color: #5c677d;
      background-color: #f8fafe;
      text-align: left;
      font-weight: bolder;
    }
  }
}

.data-pagination {
  text-align: right;
  padding-top: 20px;
}

.el-dropdown-menu {
  &.el-dropdown-menu--small {
    .round(6px);
    .boxshadow(0 5px 15px rgba(0, 0, 0, .1));

    .el-dropdown-menu__item {
      line-height: 30px;
      padding: 0 20px;
      font-size: 14px;

      .iconfont {
        display: inline-block;
        vertical-align: top;
        font-size: 18px;
        margin-right: 5px;
      }
    }
  }
}

.el-message {
  &[role="alert"] {
    .boxshadow(0 10px 20px rgba(0, 0, 0, .1));
    .round(12px);

    .el-message__icon {
      &.el-icon-error, &.el-icon-success, &.el-icon-warning {
        color: #fff;
      }
    }

    &.el-message--error, &.el-message--success, &.el-message--warning {
      background-color: rgba(217, 4, 41, .85);
      border-color: rgba(217, 4, 41, .9);

      .el-message__content {
        color: #fff;
        text-shadow: 0 1px 2px rgba(0, 0, 0, .1);
        line-height: 20px;
      }
    }

    &.el-message--success {
      background-color: rgba(43, 147, 72, .85);
      border-color: rgba(43, 147, 72, .9);
    }

    &.el-message--warning {
      background-color: rgba(238, 155, 0, .85);
      border-color: rgba(238, 155, 0, .9);
    }

    .el-message__icon {
      font-size: 30px;
    }
  }
}

.plan-item-popover {
  position: relative;
  overflow: hidden;
  padding: 5px;
  font-size: 12px;

  dl {
    dt {
      font-size: 14px;
      font-weight: bolder;
      white-space: nowrap;
      padding-bottom: 5px;
    }

    dd {
      .plan-content {
        font-size: 12px;
        line-height: 20px;
        white-space: normal;
        max-height: 60px;
        overflow: hidden;
        overflow-y: auto;
      }

      .plan-attrs {
        margin-top: 5px;
        white-space: nowrap;

        label {
          display: inline-block;
          vertical-align: top;
          font-size: 0;

          i, em {
            display: inline-block;
            line-height: 20px;
            font-size: 12px;
            vertical-align: top;
          }

          .iconfont {
            font-size: 14px;
          }

          em {
            color: @color-red-flat;
            margin-left: 4px;
          }
        }
      }

      .plan-control {
        border-top: 1px solid #f0f2f5;
        margin-top: 8px;
        padding-top: 10px;
        white-space: nowrap;
        position: relative;
        text-align: right;

        .btn-blue-fill {
          vertical-align: top;
          .button-size(0, 10px, 12px, 26px, 4px);
          color: #fff;
        }
      }
    }
  }
}

.el-tooltip__popper {
  &.is-light {
    background-color: @color-light-blue;
    border-color: @color-blue;
    color: @color-blue;
    .round(6px);
    padding: 6px 15px;

    &[x-placement^=bottom] {
      .popper__arrow {
        border-bottom-color: @color-blue;

        &:after {
          border-bottom-color: @color-light-blue;
        }
      }
    }
  }
}

.el-auths-tree {
  .el-tree-node__content {
    height: 34px;
    line-height: 34px;
  }
}

.auths-tree-node, .cascader-tree-node {
  white-space: nowrap;
  overflow: hidden;
  font-size: 0;
  color: #227c9d;

  i, em {
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
    line-height: 34px;
  }

  .poser {
    font-size: 12px;
    opacity: .6;
    margin-left: 5px;
  }

  .iconfont {
    opacity: .4;
    margin-right: 5px;
    font-size: 20px;
  }

  .icon-boy {
    width: 20px;
    height: 20px;
    .background-attr(center center, contain, no-repeat);
    .background-image('icon-boy.png');
    position: relative;
    top: 7px;
    opacity: 1;

    &:before {
      display: none;
    }
  }

  .icon-girl {
    width: 20px;
    height: 20px;
    .background-attr(center center, contain, no-repeat);
    .background-image('icon-girl.png');
    position: relative;
    top: 7px;
    opacity: 1;

    &:before {
      display: none;
    }
  }

  &.org-node {
    color: #666;
  }

  &.org-null {
    opacity: .4;
  }
}

.cascader-tree-node {
  i, em {
    display: inline-block;
    vertical-align: top;
    line-height: 34px;
    font-size: 12px;
  }

  .iconfont {
    font-size: 15px;

    &.icon-depts {
      position: relative;
      top: 2px;
    }
  }
}

.data-limit-tree {
  .box-sizing(border-box);
  padding: 20px;
  padding-top: 0;
  overflow: hidden;
  height: 100%;

  dl {
    height: 100%;
    overflow: hidden;
    position: relative;
  }

  .d-header {
    .absolute(0, 0, 0, auto, auto, auto, 5);
  }

  .d-footer {
    .absolute(0, auto, 0, 0, auto, auto, 5);
    text-align: right;

    button {
      & + button {
        margin-left: 10px;
      }
    }
  }

  dd {
    .absolute(0, 50px, 0, 55px, auto, auto, 4);
    overflow: hidden;
    overflow-y: auto;
  }
}

.resetBg {
  background: #fff !important;

  .el-input {

    .el-input__inner {
      background: #fff !important;
    }
  }
}

.el-date-range-picker {
  width: 514px;
}

.el-notification {
  width: auto;
  min-width: 330px;
  max-width: 50%;
}

.el-autocomplete-suggestion {
  &.autocomplete-suggestion-customer {
    li {
      line-height: 18px;
      font-size: 13px;
      color: #555;
      white-space: normal;
      padding: 5px 15px;
    }
    .username, .company {
      font-size: 13px;
    }
    .username {
      font-weight: bolder;
    }
    .company {
      font-size: 12px;
      color: #999;
    }
  }
}
.ca-header-attrs {
  .el-descriptions__body {
    .el-descriptions__table {
      .el-descriptions-item__cell {
        font-size: 13px;
        line-height: 20px;
        .el-descriptions-item__label {
          white-space: nowrap;
        }
      }
    }
  }
}
